<template>
<div class="raffle-wrap" style="background: #543ad0">
  <!--fixed定位的时候显示timeline模块-->
  <Header :fixed="fixedLine" v-show="fixedLine"></Header>
  <!--显示timeline模块的时候，加上scrollH类，重置高度-->
  <Scroll ref="scroll" :probeType="3" :listenScroll="true" :bounce="false" @scroll="fixTimeline" :class="{scrollH:this.fixedLine}">
    <div class="pad40">
      <Header :fixed="fixedLine" id="defaultHeader"></Header>
      <div class="h328" v-show="fixedLine"></div>
    </div>
     <!-- <video
        id="video"
        :src="videoUrl"
        controls = "true"
        preload="auto"
        webkit-playsinline="true"
        x5-playsinline="true"
        playsinline="true"
        x-webkit-airplay="allow"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-orientation="landscape|portrait"
        style="object-fit:fill;width: 100%;">
      </video>-->
      <div class="raffle-item">
        <p class="title">疯狂828 全民免费充!</p>
        <div class="flower-box">
          <p>活动当天，星星充电APP用户在红包站点充电全免！</p>
          <p>备注：参与活动的用户需配合现场管理人员引导，否则星星充电有权取消该账户活动资格；</p>
          <p>c、仅限星星充电APP上显示红包标识的桩群；</p>
          <p>d、微信小程序充电方式不参与；</p>
          <p>e、参与活动的用户需配合现场管理人员引导，否则星星充电有权取消活动资格；</p>
        </div>
      </div>
      <!--<div class="raffle-item qipao">-->
        <!--<p class="title">充值狂欢，返的比充的多!</p>-->
        <!--<div class="flower-box">-->
          <!--<p class="info">通过星星充电APP充电满<span class="important">10度</span>即可参与充值返券活动；</p>-->
          <!--<div class="btn-box">-->
            <!--<p class="ruleBtn" @click.prevent.stop="openChargeRule">充值规则</p>-->
          <!--</div>-->
          <!--<div class="flex-between">-->
            <!--<div class="hongbao" v-for="(item, index) in buyPrice" :key="`buyPrice${index}`">-->
              <!--<div class="price flex-column-between"><p>充值{{item.payPrice}}元返</p><p class="num">{{item.backPrice}}</p><p>抵用券</p></div>-->
              <!--<div class="pay" :id="item.payValue" @click.prevent.stop="pay">去充值</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<p class="text-tip">（仅当天充值有效，返还抵用券限自营电站使用）</p>-->
        <!--</div>-->
      <!--</div>-->
      <div class="raffle-item qipao-bottom">
        <p class="title">中奖百分百，汽车开回家!</p>
        <div class="flower-box no-pad" >
          <div class="padBox">
            <p class="info">8月28日，在20点28分前使用星星充电APP在有红包标识的桩群上充电且单笔充电订单大于等于<span class="important">10度</span>即可参与抽奖。</p>
            <div class="btn-box">
              <p class="countTime-info" v-if="!dayTimeBegin">08月28日 20:28  开始抽奖</p>
              <p class="Quartz-Mdm" v-else>{{countTime}}</p>
              <p class="ruleBtn" @click.prevent.stop="openPrizeRule">抽奖规则</p>
            </div>
            <!--<div class="scratch-prize flex-column-between">-->
              <!--<p class="tip">幸运大抽奖 汽车开回家</p>-->
              <!--<div class="guajiang-btn">点击刮奖</div>-->
            <!--</div>-->
            <div v-for="(i, index) in lotteryChance" v-if="lotteryChance.length > 0" :key="`lottery${index}`">
              <ScratchCard :id="i" :countTimeBegin="beginFlag" :countTime="countTime"/>
            </div>
            <div v-for="(i, index) in cardData" :key="`card${index}`">
              <ScratchCard :cardInfo="i" :countTimeBegin="beginFlag"/>
            </div>
          </div>
          <div class="marquee">
            <i class="marquee-icon"></i>
            <MarqueeTips :content="marqueeContent" :speed="20"></MarqueeTips>
          </div>
          <div class="swiper-gift ">
            <img src="../../../assets/img/prev.png" alt="" class="prev"  @click="$refs.smSlide.prev()">
            <slide ref="smSlide" :showDot="false" :stopPropagation="true" :autoPlay="false" :showPrev="true" :showNext="true" :allowEmit="false">
              <div v-for="(slideItem,slideindex) in giftsData" :key="slideindex" class="flex-start">
                <div class="giftBox flex-column-between" v-for="(giftItem,giftIndex) in slideItem" :key="giftIndex">
                  <p>{{ giftItem.text }}</p>
                  <img :src="giftItem.picUrl" alt="">
                </div>
              </div>
            </slide>
            <img src="../../../assets/img/qianjin.png" alt="" class="next"  @click="$refs.smSlide.next()">
          </div>
        </div>
        <Footer></Footer>
      </div>
  </Scroll>
  <toast :open="toastVisible" :delay="false" :modal="modalFlag" @close.prevent.stop="closeToast">
    <div slot="tipmes">
      <div v-show="modalFlag" class="rule-wrap">
        <h3>
          <i class="close-btn" @click.stop.prevent="closeToast"></i>
        </h3>
        <section>
          <TipScroll ref="scrollTip" :loadMore="false" :bounce="false">
            <div slot="defaultScroll">
              <p v-for="(i, index) in rules" :key="`RaffleRules${index}`">{{i}}</p>
            </div>
          </TipScroll>
        </section>
      </div>
      <div v-show="!modalFlag">{{toastMes}}</div>
    </div>
  </toast>
</div>
</template>

<script type="text/ecmascript-6">
  import Header from '../components/header'
  import Footer from '../components/footer'
  import Slide from '../../../components/slide/slide.vue'
  import TipScroll from '../../../components/scroll/list'
  import Scroll from '../../../components/scrollNew/scroll'
  import ScratchCard from '../canvas/scratchCard';
  import toast from '../../../components/feedback/toast';
  import MarqueeTips from 'vue-marquee-tips'
  import {getPrizeInfo} from '../../../mock/mock';
  import Jsbridge from '../../../utils/jsbridge';
  import functionalTool from '../../../utils/functionTools';
  export default {
    name: 'raffle',
    data () {
      return {
        fixedLine: false,
        posY: 0,
        starTime: '',
        starOver: '',
        lotteryTime: '',
        lotteryOver: '',
        starWait: false,
        lotteryWait: false,
        toastVisible: !1,
        toastMes: '',
        modalFlag: !1,
        animate: true,
        pageIndex: 0,
        userId: functionalTool.getUrlParam('accountId'),
        giftsData: window.picVideoConfig.list,
        videoUrl: window.picVideoConfig.videoUrl,
        rules: [],
        activeData: {},
        prizeData: null,
        cardData: null,
        countTimeBegin: !1,
        dayTimeBegin: !1,
        countTime: '00:00:00',
        lotteryChance: [],
        marqueeContent: [],
        buyPrice: [],
        jsbridge: new Jsbridge()
      }
    },
    components: {
      Header,
      Slide,
      Footer,
      TipScroll,
      Scroll,
      toast,
      ScratchCard,
      MarqueeTips
    },
    created () {
    },
    computed: {
      beginFlag () {
        return this.countTimeBegin;
      }
    },
    mounted () {
        // this.$root.eventBus.$on('gifts', (gifts) => {
        //   this.$nextTick(() => {
        //     this.giftsData = gifts.list;
        //   })
        // });
      // this.giftsData = window.giftsConfig.list;
      // console.log('giftsData', this.gifts)
      this.$root.eventBus.$on('scrollEnd', (res) => {
        this.pageIndex = res;
      });
      this.$root.eventBus.$on('rules', (r) => {
        this.r = r;
      });
      this.$root.eventBus.$on('activeInfo', (r) => {
        this.activeData = r;
        this.checkCountTime(this.activeData);
        this.lotteryChance.length = r.lotteryChance;
        // this.countTimeBegin && this.updateCountTime(this.activeData);
        this.dayTimeBegin && this.updateCountDay(this.activeData);
        // this.showTime();
        this.activeData.accountId &&
        this.getPrizeCardInfo({
          userId: this.activeData.accountId
        });
      });
      this.getPrizeInfo();
      this.buyPrice = window.buyPrice;
      this.$nextTick(() => {
        this.getOffsetH();
      })
    },
    methods: {
      // 获取初始渲染的时间轴距顶部距离
      getOffsetH () {
        let timelineOffsetH = document.getElementById('defaultHeader').getElementsByClassName('time-line');
        this.offtop = timelineOffsetH[0].offsetTop;
        console.log(timelineOffsetH)
      },
      // 监听滚动条，当滚动的距离绝对值大于offtoplu的时候，timeline固定在窗口顶部
      fixTimeline (pos) {
        this.fixedLine = pos.y <= -this.offtop;
        // this.posY = pos.y <= -194 ? pos.y : 0
      },
      pay (e) {
        if (!this.activeData.accountId) {
          this.jsbridge.call('activityLoginWithAccount', {}, (res) => {
            let result = JSON.parse(res);
            this.$parent.$parent.$parent.ActivityInfo({
              accountId: result.accountId,
              // account: result.account,
              city: result.city
            });
          });
        } else {
          this.jsbridge.call('goToAccountRecharge', {
            amount: e.target.id
          });
        }
      },
      // getStyle (index) {
      //   return `background-image:url(${this.slideData[index].picUrl})`
      // }
      // 选择用户奖品信息
      async getPrizeInfo () {
        try {
          const resData = await getPrizeInfo();
          if (resData.data.code === '200') {
            this.prizeData = resData.data.data;
            for (let i of this.prizeData) {
              i.account && this.marqueeContent.push(i.account + ':' + i.lotteryName);
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async getPrizeCardInfo (param) {
        try {
          const resData = await getPrizeInfo(param);
          if (resData.data.code === '200') {
            this.cardData = resData.data.data;
          }
        } catch (e) {
          console.log(e);
        }
      },
      checkCountTime (r) {
        let currentTime = r.currentTime;
        currentTime = currentTime.replace(new RegExp('-', 'gm'), '/');
        currentTime = new Date(currentTime).getTime();
        this.currentTime = currentTime;
        let activityTime = JSON.parse(r.activityTime);
        let dayStart = activityTime.dayActivityTime.split('--')[0];
        dayStart = dayStart.replace(new RegExp('-', 'gm'), '/');
        dayStart = new Date(dayStart).getTime();
        let lotteryStart = activityTime.lotteryActivityTime.split('--')[0];
        lotteryStart = lotteryStart.replace(new RegExp('-', 'gm'), '/');
        lotteryStart = new Date(lotteryStart).getTime();
        this.dayTimeBegin = currentTime >= dayStart;
      },
      updateCountDay (r) {
        let activityTime = JSON.parse(r.activityTime);
        let lotteryStart = activityTime.lotteryActivityTime.split('--')[0];
        lotteryStart = lotteryStart.replace(new RegExp('-', 'gm'), '/');
        lotteryStart = new Date(lotteryStart).getTime();
        let countTimeValue = parseInt((lotteryStart - this.currentTime) / 1000);
        if (countTimeValue > 0) {
          this.countHandle = setInterval(() => {
            const fixTime = parseInt((lotteryStart - new Date().getTime()) / 1000);
            // 当移动端黑屏再次唤醒时，修正倒计时增量
            if (Math.abs(fixTime - countTimeValue) > 1) {
              countTimeValue = fixTime;
            }
            countTimeValue -= 1;
            this.countTime = this.transformTime(countTimeValue);
            if (countTimeValue <= 0) {
              clearInterval(this.countHandle);
              this.countTimeBegin = this.currentTime >= lotteryStart;
              // 自动进入抽奖倒计时，重置当前时间
              this.currentTime = lotteryStart;
              this.updateCountTime(activityTime);
            }
          }, 1000);
        } else {
          this.countTimeBegin = this.currentTime >= lotteryStart;
          this.countHandle && clearInterval(this.countHandle);
          this.updateCountTime(activityTime);
        }
      },
      updateCountTime (r) {
        let activityTime = r;
        let lotteryEnd = activityTime.lotteryActivityTime.split('--')[1];
        lotteryEnd = lotteryEnd.replace(new RegExp('-', 'gm'), '/');
        lotteryEnd = new Date(lotteryEnd).getTime();
        let countTimeValue = parseInt((lotteryEnd - this.currentTime) / 1000);
        if (countTimeValue > 0) {
          this.countHandle = setInterval(() => {
            const fixTime = parseInt((lotteryEnd - new Date().getTime()) / 1000);
            // 当移动端黑屏再次唤醒时，修正倒计时增量
            if (Math.abs(fixTime - countTimeValue) > 1) {
              countTimeValue = fixTime;
            }
            countTimeValue -= 1;
            this.countTime = this.transformTime(countTimeValue);
            if (countTimeValue <= 0) {
              clearInterval(this.countHandle);
              this.countTime = '抽奖结束';
            }
          }, 1000);
        } else {
          this.countHandle && clearInterval(this.countHandle);
          this.countTime = '抽奖结束';
        }
      },
      transformTime (t) {
        let hours = parseInt(t / 3.6e3);
        let minute = parseInt((t % 3.6e3) / 60);
        let second = parseInt((t % 60));
        return `${this.formatTime(hours)}:${this.formatTime(minute)}:${this.formatTime(second)}`;
      },
      formatTime (t) {
        let formatT = t.toString().length > 1 ? t : `0${t}`
        return formatT;
      },
      openPrizeRule () {
        this.rules = [];
        this.rules = this.r.lotteryRule;
        this.showRules();
      },
      openChargeRule () {
        this.rules = [];
        this.rules = this.r.chargeRule;
        this.showRules();
      },
      showRules () {
        this.toastVisible = !0;
        this.modalFlag = !0;
        this.$nextTick(() => {
          if (this.$refs.scrollTip) {
            this.$refs.scrollTip.scroll && this.$refs.scrollTip.scroll.destroy();
            this.$refs.scrollTip._initComponent();
            this.$refs.scrollTip.scroll && this.$refs.scrollTip.scroll.scrollTo(0, 0);
          }
        });
      },
      // 关闭modal
      closeToast () {
        this.toastVisible = !1;
      }
    }
  };
</script>

<style rel="stylesheet/stylus" lang="stylus">
  @import '../../../assets/css/mixin.styl';
  .raffle-wrap
    position relative
    height 100%
    .raffle-item
      /* height rpx(368)*/
      background-color #543ad0
      background-image url("/static/image/henfu.png")
      background-repeat no-repeat
      background-size 100%
      padding rpx(24) rpx(30) rpx(6)
      background-position rpx(-30) rpx(30)
      color #ffffff
      font-size $fontsize-medium
      .ruleBtn
        background #fff45c;
        display inline-block;
        padding rpx(8) rpx(32);
        border-radius: 16px;
        box-shadow 2px 6px 20px -3px rgba(120, 17, 40, 0.5);
        color #543ad0;
        font-size $fontsize-medium;
      .important
        color #fff100
        font-size $fontsize-large-xx
      .title
        padding: rpx(28) 0 rpx(56) rpx(88);
      img
        width 100%
      .flower-box
        width rpx(640)
        margin auto
        background-color #f93662
        background-image  url("../../../assets/img/flower.png")
        background-position right bottom;
        background-size rpx(100)
        background-repeat no-repeat;
        border-radius 8px
        padding rpx(24)
        line-height 1.4
        box-shadow: 0px 0 8px 2px rgba(29, 11, 66, 0.5);
        .padBox
          padding rpx(24)
        p
          white-space normal
          word-break break-all
          text-align justify
        .text-tip
          font-size rpx(20)
          padding rpx(20) 0
          text-align center
        .info
          background #fa5e81;
          border-radius rpx(8);
          padding rpx(14) rpx(30);
        .tip
          text-align center;
          font-size $fontsize-small;
          color: #fff100;
          padding: rpx(16) 0;
        .btn-box
          padding rpx(20) 0
          .countTime-info
            font-size rpx(44)
            font-weight bold
            text-align center
            padding-bottom rpx(24)
          .Quartz-Mdm
            font-family 'QuartzMdm'
            letter-spacing 4px
            font-size $fontsize-big
            font-weight bold
            text-align center
            padding-bottom rpx(18)
        .hongbao
          background-image url("../../../assets/img/hongbaokapian.png")
          background-size 100% 100%
          height rpx(230)
          width rpx(190);
          .price
            color: #fd3e16;
            font-size: rpx(20);
            height rpx(156)
            padding: rpx(20) 0;
            line-height 1
            margin-bottom rpx(20)
            p
              font-size rpx(20)
              text-align center
            .num
              font-size rpx(64)
            .fourNum
              font-size $fontsize-large-xxxxx
          .pay
            background: #fedc99;
            display: inline-block;
            padding: rpx(4) rpx(24);
            border-radius: 16px;
            font-size: rpx(24);
            color: #fd3e16;

        .scratch-prize
          height rpx(284)
          width rpx(490)
          background-image url("../../../assets/img/guajiang.png")
          background-size 100% 100%
          margin rpx(18) auto 0
          padding rpx(30) 0
          .tip
            color: #eb6100
            font-size $fontsize-large-x
            text-align center
            padding rpx(30) 0
        .guajiang-btn
          background-image url("../../../assets/img/guajiangjianbian.png")
          background-size 100% 100%
          height rpx(62)
          width rpx(304)
          font-size $fontsize-medium
          text-align center
          line-height rpx(62)
          margin auto
        .marquee
          display flex
          padding rpx(30) rpx(50)
          .marquee-icon
            display inline-block
            flex 0 0 rpx(40)
            width rpx(40)
            height rpx(40)
            box-sizing border-box
            background url('../../../assets/img/laba.png') no-repeat
            background-size 100% 100%
            margin-right rpx(10)
          & p
            flex 1
            & span
              line-height rpx(40)
              font-size rpx(24)
              padding-right rpx(100)
        .swiper-gift
          background-color rgba(103, 103, 103, 0.24)
          padding rpx(36) rpx(52)
          /*margin-bottom rpx(60)*/
          position relative
          .prev
            width: rpx(28);
            height: rpx(46);
            position: absolute;
            z-index: 1000;
            left: rpx(26);
            top: 50%;
            transform: translateY(-50%);
          .next
            width: rpx(28);
            height: rpx(46);
            position: absolute;
            z-index: 1000;
            right: rpx(26);
            top: 50%;
            transform: translateY(-50%);
          .giftBox
            height rpx(192)
            width rpx(146)
            background-color #b32646
            padding rpx(20) rpx(20)
            font-size rpx(20)
            border-radius 8px
            margin 0 rpx(16)
            p
              padding-bottom rpx(18)
              text-align center
            img
              width rpx(80)
      .no-pad
        padding 0
    .qipao
      background-image url("/static/image/henfu.png"),url("/static/image/qipao.png")
      background-position rpx(-30) rpx(30),0 rpx(316)
    .qipao-bottom
      background-image url("/static/image/henfu.png"),url("/static/image/qipao.png")
      background-position rpx(-30) rpx(30),left bottom
      padding-bottom rpx(100)
      position relative
    .scrollH
      height "calc(100% - %s)" % rpx(140)!important
</style>
